<template>
    <div id="panel" class="xk-panel">
        <div class="xk-panel-head">
            <h2 class="xk-panel-head__title" 
            v-text="title" 
            :style="{
                fontSize: titleFontSize,
                color: titleColor
            }"></h2>
            <div class="xk-panel-head__line" v-if="isLine"></div>
            <p class="xk-panel-head__title_en" v-text="titleEn"></p>
        </div>
        <div :class="{
            'xk-panel-body': true,
            'container': !isFullContainer
        }">
            <slot />
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            required: true,
            default: "测试"
        },
        titleEn: {
            type: String,
            required: false,
            default: ""
        },
        isFullContainer: {
            type: Boolean,
            required: false,
            default: false
        },
        titleFontSize: {
            type: String,
            default: '40px'
        },
        titleColor: {
            type: String,
            default: "rgba(102, 102, 102, 1)"
        },
        isLine: {
            type: Boolean,
            default: false,
        },

    }
}
</script>

<style lang="less" scoped>
.xk-panel{
    font-family: "MicrosoftYaHei", "微软雅黑";
    margin-bottom: 120px;
    &-head{
        text-align: center;
        line-height: 1;
        &__title{
            font-size: 40px;
            color: rgba(102, 102, 102, 1);
            margin-bottom: 20px;
        }
        &__title_en{
            font-size: 20px;
            color: rgba(0, 144, 255, 1);
            margin-bottom: 96px;
        }
        &__line{
            width:600px;
            height:2px;
            background:linear-gradient(90deg,rgba(229,73,22,0) 0%,rgba(229,73,22,0.98) 49%,rgba(229,73,22,-0.1) 100%);
            opacity:0.68;
            margin: auto;
        }
    }
    &-body{

    }
} 
</style>
